﻿<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>小卓提交表单练习</title>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script>
onload = ()=>{
  console.log('页面已加载完成。');

  email.onblur = ()=>checkEmail();
  nick.onblur = ()=>checkNick();
  pwd1.onblur = ()=>checkPwd(pwd1);
  pwd2.onblur = ()=>checkPwd(pwd2);

  表单.onsubmit = ()=>{
    if(checkEmail())return false;
    if(checkNick())return false;
    if(checkPwd(pwd1))return false;
    if(checkPwd(pwd2))return false;
    模拟提交成功页面();
    return true;
  };

  模拟提交成功页面();
};

let checkEmail = ()=>{
  if(!email.value.trim())
    showtip(email, '邮箱不能为空');
  else if(!/^.+@.+$/.test(email.value))
    showtip(email, '邮箱格式不正确，例如：10000@qq.com');
  else return false;
  return true;
};

let checkNick = ()=>{
  if(!nick.value.trim())
    showtip(nick, '昵称不能为空');
  else if(nick.value.trim().length < 6)
    showtip(nick, '昵称格式不正确，例如：xiaozhuo');
  else return false;
  return true;
};

let checkPwd = pwd=>{
  if(!pwd.value.trim())
    showtip(pwd, '密码不能为空');
  else if(pwd.value.trim().length < 6)
    showtip(pwd, '密码格式不正确，例如：123456');
  else if(pwd==pwd2 && pwd1.value != pwd2.value)
    showtip(pwd2, '两个密码不一致');
  else return false;
  return true;
};

let showtip = (dom, info)=>{
  if(dom instanceof HTMLInputElement){
    if(!info)return;
    $(msg).stop({clearQueue: true});
    let dt = dom.offsetTop;
    let dl = dom.offsetLeft;
    let dw = dom.offsetWidth;
    let mh = msg.offsetHeight;
    $(msg).animate({opacity: 0, top: `${dt+mh}px`, left: `${dl+dw+10}px`}, 0, ()=>msg.innerText=info)
    .animate({opacity: 1, top: `${dt}px`}, 300)
    .delay(2000)
    .animate({opacity: 0, top: `${dt-10}px`}, 500);
  }
};

let 模拟提交成功页面 = ()=>{
  let emailValue = sessionStorage.getItem('email');
  let nickValue = sessionStorage.getItem('nick');
  let pwdValue = sessionStorage.getItem('pwd');
  if(emailValue && nickValue && pwdValue){
    表单.style.display = 'none';
    document.body.innerHTML = `
      <br/>提交成功：
      <br/>邮箱：${emailValue}
      <br/>昵称：${nickValue}
      <br/>密码：${pwdValue}
      <br/><input type="button" value="返回" onclick="location.reload();" />
    `;
  }
  sessionStorage.setItem('email', window.email?.value||'');
  sessionStorage.setItem('nick', window.nick?.value||'');
  sessionStorage.setItem('pwd', window.pwd1?.value||'');
};

console.log('页面正在加载中……');

</script>
<style>
  form{text-align: center; margin-top: 50px;}
  form{user-select: none;}
  input{padding: 5px 6px; margin: 10px 0;}
  #msg{padding: 3px 6px; font-size: 14px; color: #2F2C2C; background: #FFCFCF; text-shadow: 0 1px 0 #FFFFFF; border: 1px solid #FF1F1F; border-radius: 5px; pointer-events: none; position: absolute; opacity: 0;}
</style>
</head>
<body>
  <form id="表单">
    <span>邮箱：</span><input type="text" id="email"><br/>
    <span>昵称：</span><input type="text" id="nick"><br/>
    <span>密码：</span><input type="password" id="pwd1"/><br/>
    <span>密码：</span><input type="password" id="pwd2"><br/>
    <input id="提交" type="submit" value="提交按钮"/>
    <div id="msg"></div>
  </form>
</body>
</html>